<template>
	<div class="app-container">
		<div class="filter-container">
			<el-input v-model="listQuery.orderSn" placeholder="订单编号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleConditionQuery" />
			<el-input v-model="listQuery.phone" placeholder="收货人电话" style="width: 200px;" class="filter-item" @keyup.enter.native="handleConditionQuery" />
			<el-input v-model="listQuery.username" placeholder="收货人名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleConditionQuery" />
			<el-select v-model="listQuery.status" placeholder="订单状态" clearable style="width: 200px" class="filter-item">
			  <el-option v-for="item in orderStatusFilter" :key="" :label="item.text" :value="item.value" />
			</el-select>
			<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleConditionQuery">搜索</el-button>
			<el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="handleFilterReset">重置</el-button>
		</div>

		<el-table
			v-loading="listLoading"
			:data="list"
			element-loading-text="Loading"
			border
			fit
			stripe
			highlight-current-row
			:row-style="{ height: '40px' }"
			:cell-style="{ padding: '5px 0' }"
		>
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="订单id" width="80" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="订单编号" min-width="150" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.orderSn }}</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" width="170" align="center">
				<template slot-scope="scope">
					{{scope.row.createTime | formatCreateTime}}
				</template>
			</el-table-column>
			<el-table-column label="订单总价" width="150" align="center">
				<template slot-scope="scope">
					{{ scope.row.totalPrice }}
				</template>
			</el-table-column>
			<el-table-column label="收货人" width="110" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.userName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="订单状态" width="110" align="center" 
			:filters="orderStatusFilter" :filter-method="handelFilterOrderStatus">
				<template slot-scope="scope">
					{{ scope.row.orderStatus | orderTextFilter }}
				</template>
			</el-table-column>
			<el-table-column label="付款方式" width="110" align="center">
				<template slot-scope="scope">
					<el-tag :type="scope.row.payType | payTypeTagFilter">{{ scope.row.payType | payTypeTextFilter }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="支付状态" width="110" align="center">
				<template slot-scope="scope">
					<el-tag :type="scope.row.payStatus | payStatusTagFilter">{{ scope.row.payStatus | payStatusTextFilter }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作"  width="150" align="center" fixed="right">
				<template slot-scope="scope">
					<el-button @click="handleToOder(scope.row)"  size="small">查看订单</el-button>
					<el-button type="primary" @click="handleDilivery(scope.row.id)"  size="small" v-if="scope.row.orderStatus ==1">发货</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 5" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange" />
	</div>
</template>

<script>
import { getAll, delivery } from '@/api/order';
import { parseTime } from '@/utils/index';
import Pagination from '@/components/Pagination'; // 分页组件

export default {
	components: { Pagination },
	filters: {
		 formatCreateTime(time) {
		        let date = new Date(time);
		        return parseTime(date)
		 },
		orderTextFilter(status) {
			const statusMap = {
				3: '已完成',
				2: '待收货',
				1: '待发货',
				0: '未付款',
				"-1": '已取消'
			};
			return statusMap[status];
		},
		// 支付方式tag 颜色
		payTypeTagFilter(status){
			const statusMap = {
				2: '',
				1: 'success',
				0: 'info'
			};
			return statusMap[status];
		},
		// 支付方式文字
		payTypeTextFilter(status) {
			const statusMap = {
				2: '支付宝',
				1: '微信',
				0: '余额'
			};
			return statusMap[status];
		},
		// 支付状态颜色
		payStatusTagFilter(status) {
			const statusMap = {
				1: 'success',
				0: 'info'
			};
			return statusMap[status];
		},
		// 支付文字颜色
		payStatusTextFilter(status) {
			const statusMap = {
				1: '已支付',
				0: '未支付'
			};
			return statusMap[status];
		},
		handelFilterorderStatus(value, row, column){
			const property = column['orderStatus'];
			return row[orderStatus] === value;
		}
	},
	data() {
		return {
			// 订单状态筛选
			orderStatusFilter:[
				{text: '已完成', value: 3},
				{text: '待收货', value: 2},
				{text: '待发货', value: 1},
				{text: '未付款', value: 0},
				{text: '已取消', value: -1}
			],
			orderStatusArray:['已完成','待收货','待发货','未付款','已取消'],
			listQuery: {
				orderSn: null,
				phone:null,
				orderStatus:null,
				username:null
			},
			list: [],
			listLoading: false,
			//页码
			pageNum: 1,
			//页数量
			pageSize: 10,
			//总数
			total: 0,
			popoverVisible:false
		};
	},
	created() {
		this.getAll();
	},
	methods: {
		// 条件查询
		handleConditionQuery() {
			console.log(111)
			let param = {
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}
			Object.assign(param,this.listQuery)
			console.log(this.listQuery)
			getAll(param).then(res => {
				res = res.data;
				this.list = res.data.list;
				this.total = res.data.total;
				this.listLoading = false;
			});
		},
		// 重置
		handleFilterReset(){
			let param = {
				orderSn: null,
				phone:null,
				orderStatus:null,
				username:null
			}
			this.listQuery = param;
		},
		// 查看订单
		handleToOder(row) {
			console.log(row.id);
			let param = {
				orderId : row.id
			}
			this.$router.push({ path: '/order/orderDetail', query: param });
		},
		goGoodDetail() {
			this.$router.push('/order/orderDetail');
		},
		getAll() {
			this.listLoading = true;
			var param = {
				pageNum: this.pageNum,
				pageSize: this.pageSize
			};
			Object.assign(param,this.listQuery)
			getAll(param).then(res => {
				console.log(res.data);
				res = res.data;
				this.list = res.data.list;
				this.total = res.data.total;
				this.listLoading = false;
			});
		},
		// 分页大小切换
		handleSizeChange(val) {
			this.pageNum = val;
			this.getAll();
		},
		// 页码切换
		handleCurrentChange(val) {
			this.pageNum = val;
			this.getAll();
		},
		handelFilterOrderStatus(value, row, column){		
			return row.orderStatus === value;
		},
		handleDilivery(orderId){
			this.popoverVisible = true
			let that = this;
			
			this.$store.dispatch('order/delivery',{
				orderId:orderId
			}).then(res=>{
				that.getAll();
			})
		}
	}
};
</script>
<style>
.filter-container {
	margin-top: 20px;
}
.filter-item{
	margin-left: 50px;
}
.el-table {
	margin-top: 20px;
}
.mainImage {
	width: 50px;
	height: 50px;
}
</style>
